<template>
	<view class="contain">
		<view class="containCenter">
			<view class="containCenterBottom">
				<view class="containTextTop">
					普通会员 (或游客)
				</view>
				<view class="containTextBottom">
					积分剩余：
					<text>{{payParam.ywParams.integral}}</text>
				</view>
				<view class="buyVipText">
					会员购买
				</view>
			</view>
			<view class="toBuyVip">
				<view class="toBuyVipContain">
					<view class="toBuyVipContainCenter">
						<!-- 第一个盒子 -->
						<view class="buyVipContainFirst" :style="{'background-color':tag == 1 ? '#ffcfcf':''}"
							@click="switchTag(1)">
							<view class="buyVipContainFirstTop">
								超值体验
							</view>
							<view class="buyVipContainFirstBottom">
								<view class="b-way">
									月卡
								</view>
								<view class="b-money">
									￥168
								</view>
								<view class="b-inter">
									31积分
								</view>
								<view class="b-pref">
									<span class="b-pref-span1">无优惠</span>
								</view>
							</view>
						</view>
						<!-- 第二个盒子 -->
						<view class="buyVipContainFirst" :style="{'background-color':tag == 2 ? '#ffcfcf':''}"
							@click="switchTag(2)">
							<view class="buyVipContainFirstTop">
								超值体验
							</view>
							<view class="buyVipContainFirstBottom">
								<view class="b-way">
									季卡
								</view>
								<view class="b-money">
									￥468
								</view>
								<view class="b-inter">
									93积分
								</view>
								<view class="b-pref">
									<span class="b-pref-span2">优惠36元</span>
								</view>
							</view>
						</view>
						<!-- 第三个盒子 -->
						<view class="buyVipContainFirst" :style="{'background-color':tag == 3 ? '#ffcfcf':''}"
							@click="switchTag(3)">
							<view class="buyVipContainFirstTop">
								超值体验
							</view>
							<view class="buyVipContainFirstBottom">
								<view class="b-way">
									年卡
								</view>
								<view class="b-money">
									￥1888
								</view>
								<view class="b-inter">
									372积分
								</view>
								<view class="b-pref">
									<span class="b-pref-span3">优惠128元</span>
								</view>
							</view>
						</view>
					</view>
					<view class="nowToBuy">
						<view class="nowToBuyTop" @click="recharge">
							立即充值
						</view>
						<view class="nowToBuyBottom">
							充值即表示同意 <text>住享家充值条款</text>
						</view>
						<view class="">
							<uni-popup ref="alertDialog" type="dialog">
								<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" title="提示"
									content="请绑定当前微信" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
							</uni-popup>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWeixinXcxPayV3,
		selectPayResultApi,
		verify,
		binddingOpenId
	} from '@/api/user.js';
	export default {
		data() {
			return {
				msgType: 'success',
				tag: 0, // 充值方式选项标签
				payParam: {
					goodsInfo: '充值积分',
					payPrice: 0, //  支付金额
					ywParams: {
						integral: 0, //  积分
						isLifelong: false //  是否终身
					},
					ywType: 'Recharge_integral' //  业务类型
				}
			}
		},
		onLoad(options) {
			this.payParam.ywParams.integral = options.integral
		},
		methods: {
			// 打开提示框
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.alertDialog.open('center')
			},
			// 关闭提示框
			dialogClose() {
				console.log('点击关闭')
			},
			// 
			dialogConfirm() {
				uni.login({
					provider: 'weixin', //使用微信登录
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success(res) {
						if (res.code) {
							console.log(res.code, '001');
							binddingOpenId({
								code:res.code
							}).then(res => {
								console.log(res, '002');
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			//  立即充值
			recharge() {
				if (this.payParam.payPrice == 0) {
					uni.showToast({
						title: '请选择充值方式...',
						icon: 'none'
					})
					return false
				}
				this.payParam.ywParams = JSON.stringify(this.payParam.ywParams)
				// 支付前的验证
				verify().then(res => {
					if (res.data == false) {
						this.open()
					}
				})
				// getWeixinXcxPayV3(this.payParam).then(res => {
				// 	let result = res.data
				// 	this.payment(result)
				// })
			},
			// 支付接口
			payment(result) {
				let that = this
				let jsConfig = result.jsConfig
				let orderNo = result.orderNo
				let params = {
					outTradeNo: orderNo
				}
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: jsConfig.timeStamp,
					nonceStr: jsConfig.nonceStr,
					package: jsConfig.packages,
					signType: jsConfig.signType,
					paySign: jsConfig.paySign,
					success: async function(res) {
						// 支付成功之后的查询函数
						await selectPayResultApi(params).then(res => {
							if (res.data) {
								// 返回个人中心页面
								uni.switchTab({
									url: '/pages/user/index'
								})
							}
						})
					},
					fail: function(err) {
						// 取消支付后 ywParams参数转json对象
						that.payParam.ywParams = JSON.parse(that.payParam.ywParams)
					}
				});
			},
			// 切换选项
			switchTag(tag) {
				this.tag = tag
				if (tag == 1) {
					this.payParam.payPrice = 168
					this.payParam.ywParams.integral = 31
				} else if (tag == 2) {
					this.payParam.payPrice = 468
					this.payParam.ywParams.integral = 93
				} else {
					this.payParam.payPrice = 1888
					this.payParam.ywParams.integral = 372
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.b-pref {
		text-align: center;
		border-radius: 0 0 20rpx 20rpx;
		margin-bottom: -28rpx;
		width: 100%;
		height: 56rpx;
		background-color: #ffe0b8;
		position: relative;
	}

	.b-pref-span1 {
		position: absolute;
		top: 11rpx;
		right: 53rpx;
		color: #9c2f2b;
		font-weight: bold;
	}

	.b-pref-span2 {
		position: absolute;
		top: 11rpx;
		right: 40rpx;
		color: red;
		font-weight: bold;
	}

	.b-pref-span3 {
		position: absolute;
		top: 11rpx;
		right: 27rpx;
		color: red;
		font-weight: bold;
	}


	.b-inter {
		font-size: 40rpx;
		font-weight: bold;
	}

	.b-way {
		font-size: 50rpx;
		margin-top: 20rpx;
		color: #9b2424;
	}

	.b-money {
		font-weight: 600;
		font-size: 40rpx;
		color: red;
	}

	.contain {
		width: 100%;
		height: 100vh;


		.containCenter {
			width: 100%;
			height: 300rpx;

			.buyVipCenterBottom {
				font-size: 35rpx;
			}

			// //会员信息介绍顶部
			// .containCenterTop {
			//   width: 100%;
			//   height: 80rpx;
			//   background-color: #fff;
			//   display: flex;
			//   align-items: center;

			//   .containCenterText {
			//     width: 100%;
			//     height: 50rpx;
			//     text-align: center;
			//     margin-right: 30rpx;
			//     font-size: 40rpx;
			//   }
			// }

			//会员信息介绍底部
			.containCenterBottom {
				width: 100%;
				height: 150%;
				background-color: #ffe2bc;
				border-radius: 0rpx 0rpx 100rpx 100rpx;
				padding: 20rpx 20rpx;

				.containTextTop {
					color: #9e2f2c;
					font-size: 30rpx;
					font-weight: 600;
				}

				.containTextBottom {
					margin-top: 20rpx;
					font-weight: 600;

					text {
						color: red;
					}
				}

				.buyVipText {
					font-weight: 600;
					margin-top: 70rpx;
					margin-left: 30rpx;
				}
			}

			.toBuyVip {
				width: 100%;
				height: 60vh;
				position: relative;
				display: flex;
				justify-content: center;

				// 会员购买区域
				.toBuyVipContain {
					width: 90%;
					height: 700rpx;
					border-radius: 20rpx;
					background-color: #fff;
					position: absolute;
					top: -26%;
					padding: 0 20rpx;
					padding-top: 40rpx;
					margin-top: 10rpx;

					.toBuyVipContainTop {
						width: 100%;
						height: 80rpx;
						display: flex;
						align-items: center;
						font-weight: 600;
					}

					.toBuyVipContainCenter {
						width: 100%;
						height: 60%;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.buyVipContainFirst {
							width: 30%;
							background-color: #fff;
							border-radius: 20rpx;
							border: 4rpx solid #ffe2bc;
							display: flex;
							flex-direction: column;
							text-align: center;

							.buyVipContainFirstTop {
								width: 70%;
								height: 40rpx;
								background-color: #ffe0b8;
								border-top-left-radius: 20rpx;
								border-bottom-right-radius: 40rpx;
								font-size: 25rpx;
								color: #9e3358;
								font-weight: 600;
							}

							.buyVipContainFirstBottom {
								flex: 1;
								// background-color: pink;
								border-radius: 20rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-evenly;
								align-items: center;
							}


						}

						.active {
							background-color: #ffcfcf;
						}

						// 第二个
						.buyVipContainSecond {
							width: 30%;
							background-color: #fff;
							border-radius: 20rpx;
							border: 1rpx solid #7479de;
							display: flex;
							flex-direction: column;

							.buyVipContainFirstTop {
								width: 70%;
								height: 40rpx;
								text-align: center;
								background-color: #2D54F7;
								border-top-left-radius: 20rpx;
								border-bottom-right-radius: 40rpx;
								font-size: 25rpx;
								color: #fff;
								font-weight: 600;
							}

							// 第二个盒子
							.buyVipContainFirstCenter {
								width: 100%;
								height: 120rpx;
								// background-color: pink;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								font-weight: 800;

								.buyVipCenterTop {
									width: 100%;
									height: 70rpx;
									display: flex;
									justify-content: center;
									align-items: center;

									image {
										width: 50%;
										height: 100%;

									}
								}
							}

							.buyVipContainFirstBottom {
								width: 100%;
								display: flex;
								background-color: #ff5353;
								border-bottom-left-radius: 20rpx;
								border-bottom-right-radius: 20rpx;
								justify-content: center;
								font-size: 24rpx;
								color: #fff;
							}
						}

						.active {
							background-color: #ffcfcf;
						}

						// 第三个盒子
						.buyVipContainThird {
							width: 30%;
							background-color: #fff;
							border-radius: 20rpx;
							border: 1rpx solid #7479de;
							display: flex;
							flex-direction: column;

							// 超值体验
							.buyVipContainFirstTop {
								width: 70%;
								height: 40rpx;
								background-color: #2D54F7;
								color: #fff;
								padding-left: 15rpx;
								border-top-left-radius: 20rpx;
								border-bottom-right-radius: 40rpx;
								font-size: 24rpx;
								font-weight: 600;
							}

							.buyVipContainThirdTop {
								width: 100%;
								height: 115rpx;
								// background-color: pink;
								border-top-left-radius: 20rpx;
								border-top-right-radius: 20rpx;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								font-weight: 600;

								// 100积分图片
								.VipContainThirdTop {
									width: 100%;
									height: 100%;
									// background-color: pink;
									display: flex;
									justify-content: center;
									align-items: center;

									image {
										width: 60%;
										height: 100%;
									}

								}
							}

							.buyVipContainThirdBottom {
								width: 100%;
								height: 37rpx;
								display: flex;
								justify-content: center;
								background-color: #ff5353;
								border-bottom-left-radius: 20rpx;
								border-bottom-right-radius: 20rpx;
								color: #fff;
								font-size: 24rpx;

							}
						}

						.active {
							background-color: #ffcfcf;
						}

						// 第四个盒子
						.buyVipContainFourth {
							width: 48%;
							height: 48%;
							background-color: #fff;
							border-radius: 20rpx;
							border: 1rpx solid gray;
							display: flex;
							flex-direction: column;

							// 超值体验
							.buyVipContainFirstTop {
								width: 48%;
								height: 40rpx;
								background-color: #fda38e;
								color: #fff;
								padding-left: 15rpx;
								border-top-left-radius: 20rpx;
								border-bottom-right-radius: 40rpx;
								font-size: 24rpx;
								font-weight: 600;
							}

							.buyVipContainThirdTop {
								width: 100%;
								height: 113rpx;
								// background-color: pink;
								border-top-left-radius: 20rpx;
								border-top-right-radius: 20rpx;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								font-weight: 600;

								// 终身使用图片
								.VipContainThirdTop {
									width: 100%;
									height: 100%;
									display: flex;
									justify-content: center;
									align-items: center;

									image {
										width: 70%;
										height: 100%;
									}
								}
							}

							.buyVipContainThirdBottom {
								width: 100%;
								height: 38rpx;
								display: flex;
								justify-content: center;
								background-color: #ff5353;
								border-bottom-left-radius: 20rpx;
								border-bottom-right-radius: 20rpx;
								font-size: 24rpx;
								color: #fff;
							}
						}

						.active {
							background-color: #ffcfcf;
						}
					}

					.nowToBuy {
						margin-top: 50rpx;

						// 立即充值按钮
						.nowToBuyTop {
							width: 100%;
							height: 80rpx;
							border-radius: 20rpx;
							background: linear-gradient(to right, #ffde59, 20%, #ffe57e, #ffc259);
							display: flex;
							justify-content: center;
							align-items: center;
							color: #a73b36;
							font-weight: 600;
						}

						.nowToBuyBottom {
							font-weight: 600;
							width: 100%;
							height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							text {
								color: #a73b36;
							}
						}
					}
				}
			}
		}
	}
</style>